<template>
	<view class="body-my">
		<!-- 我的资料 -->
		<!-- 头部 -->
		<view class="toubu-bj">
			<view class="zili-class" @click="showLogin?loginwz():''">
				<img class="toux-img" :src="showLogin?img:user.urAvatar">
				<text class="login-class">
					{{showLogin?'登录/注册':user.urName}}
				</text>
			</view>
			<text v-if="showLogin" @click="loginwz" class="logn-ioc"> </text>
			<view class="login-staus" v-else>
				<view class="login-staus-ioc-img"></view>
				<view class="login-staus-span">在线</view>
			</view>
			<view class="shuax-classs " @click="uodateAvatarUrl">
				<img style="		position: relative;width: 4%;
		left: 3%;
		top: 30px;" class="xz" src="../../static/user/update.png">
			</view>
		</view>
		<view v-if="!showLogin">
			<!-- 第一模块 -->
			<view class="card-one">
				<!-- 第一横排-->
				<view class="one-div">
					<view class="itme-div" v-for="(item,index) in wzs" @click="recharge(item.path)">
						<view>{{item.name}}</view>
						<view class="numbers-class" v-text="item.number"></view>
					</view>
				</view>
				<!--第二横排-->
				<view class="two-div">
					<view class="two-item-class" v-for="item in menus" @click="tzMuen(item.path)">
						<view class="img-div">
							<view class="img-border-class">
								<img class="tow-img-class" :src="item.img">
							</view>
							<view class="two-spane-name" :style="`${item.name.length>3?'left:0rpx':''}`">{{item.name}}
							</view>

						</view>
					</view>
				</view>
			</view>
			<!-- 第二模块 -->
			<view class="two-mk"></view>
			<!-- 第三模块 -->
			<view class="threen-mk">
				<view class="threen-list">

					<!-- 公告 -->
					<view class="threen-list-item">
						<view class="threen-list-item-img">
							<img :src="twoMuens[0].img">
						</view>
						<view class="threen-list-item-spane-name">
							{{twoMuens[0].name}}
						</view>
					</view>

					<!-- 设置 -->
					<view class="threen-list-item">
						<view class="threen-list-item-img">
							<img :src="twoMuens[1].img">
						</view>
						<view class="threen-list-item-spane-name" @tap="showModal" data-target="ChooseModal">
							{{twoMuens[1].name}}
						</view>

					</view>

				</view>
			</view>


		</view>


		<view class="cu-modal bottom-modal" :class="modalName=='ChooseModal'?'show':''" @tap="hideModal">
			<view class="cu-dialog" @tap.stop="">
				<view class="grid col-3 padding-sm">
					<view class="padding-xs">
						<view style="position: relative;height: 180px;"></view>
						<view style="left: 0;position: absolute;width: 100%;top: 10px;">
							<button class="qhuanuser" @click="tzcount()">个人资料</button>
							<button class="qhuanuser" @click="tuichu()">注销</button>
							<button class="qhuanuser" @click="zhuxiao()">切换用户</button>
							<button class="qhuanuser" @click="stingAddress()">设置默认地址</button>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				modalName: null,
				showupdate: false,
				twoMuens: [{
						img: "./static/mk-er-menu/gonggao.png",
						name: "公告"
					},
					{
						img: "./static/mk-er-menu/set.png",
						name: "设置"
					}
				],
				user: {},
				url: this.$url + "/frontend",
				showLogin: true,
				urId: sessionStorage.getItem("urId"),
				menus: [{
					path: "../my/my?status=0",
					img: "./static/img-menu/order.png",
					name: "待付款"
				}, {
					path: "../my/my?status=1",
					img: "./static/img-menu/ordering.png",
					name: "进行中"
				}, {
					path: "../my/my?status=2",
					img: "./static/img-menu/overorder.png",
					name: "已完成"
				}, {
					path: "../my/my",
					img: "./static/img-menu/allorder.png",
					name: "全部订单"
				}, {
					img: "./static/img-menu/kefu.png",
					name: "联系客服"
				}],
				wzs: [{
						path: "../recharge/recharge",
						name: "我的余额",
						number: "0.00"
					},
					{
						path: "../../order/order",
						name: "优惠卷",
						number: 0
					},
					{
						path: "../../order/order",
						name: "收藏",
						number: 0
					}
				],
				img: "https://m-b2b2c.pickmall.cn/static/missing-face.png"

			}
		},
		onShow() {
			this.info()
		},
		methods: {
			//设置默认地址
			stingAddress(){
				 uni.navigateTo({
				 	url: '../set-address/set-address'
				 })
			},
			//注销
			tuichu() {
				sessionStorage.removeItem("urId");
				this.$router.go(0);
			},
			//切换用户
			zhuxiao() {
				sessionStorage.removeItem("urId");
				this.loginwz()
			},
			//跳转个人资料
			tzcount() {
				uni.navigateTo({
					url: '../personal-information/personal-information'
				})
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			recharge(path) {
				uni.navigateTo({
					url: path
				})
			},
			/**
			 * 修改用户头像
			 */
			uodateAvatarUrl() {
				this.showupdate = true
				uni.request({
					url: `${this.url}/user/update/headPortrait/${this.urId}`,
					method: "GET",
					success: ({
						data
					}) => {
						if (data.code == 200) {
							this.user.urAvatar = data.data.url
						}
					}
				})
			},
			tzMuen(path) {
				//console.log(path)
				uni.navigateTo({
					url: path
				})
			},
			info() {
				if (this.urId) {
					this.showLogin = false
					uni.request({
						url: `${this.url}/user/info/${this.urId}`,
						method: "GET",
						success: ({
							data
						}) => {
							this.user = data.data.cbbUser;
							this.wzs[0].number = "￥" + this.user.urWallet
						}
					})

				} else {
					this.showLogin = true
				}
			},
			loginwz() {
				/* 跳转登录*/
				uni.redirectTo({
					url: "../login/login"
				})
			}
		}
	}
</script>

<style scoped>
	.qhuanuser {
		position: relative;
		width: 90%;
		/* 	border: 1px solid #0055ff; */
		margin-top: 10px;
		color: #ffffff;
		border-radius: 20px;
		font-size: 15px;
		background: linear-gradient(#5555ff, #55aaff);

	}

	.shuax-classs-img {
		position: relative;
		width: 4%;
		left: 3%;
		top: 30px;
	}

	.xz {
		-webkit-animation: run 2s linear 0s infinite;
	}

	.shuax-classs-img:hover {
		-webkit-animation-play-state: paused;
	}


	@-webkit-keyframes run {
		from {
			-webkit-transform: rotate(0deg);
		}

		to {
			-webkit-transform: rotate(360deg);
		}
	}

	.shuax-classs {
		position: relative;
	}

	.threen-list-item-img img {
		position: relative;
		width: 70rpx;
		height: 70rpx;
		left: 0%;
	}

	.threen-list-item-img {
		position: relative;
		width: 50%;
		height: 30%;
		left: 25%;
		top: 10%;
	}

	.threen-list-item-spane-name {
		position: relative;
		font-size: 10px;
		left: 33%;
		top: 20%;

	}

	.threen-list-item {
		position: relative;
		width: 20%;
		top: 30rpx;
		margin-left: 4%;
		float: left;
		/* background-color: #007AFF; */
		height: 180rpx;
	}

	.threen-list {
		position: relative;
		width: 100%;
	}

	.two-mk {
		position: relative;
		width: 90%;
		left: 5%;
		background: linear-gradient(to right, #5555ff, #55aaff);
		height: 5rpx;
		bottom: 20px;
		border-radius: 10px;

	}

	.threen-mk {
		bottom: 20px;
		position: relative;
		width: 94%;
		left: 3%;
		background-color: #FFFFFF;
		height: 400rpx;
		border-radius: 10px;
		box-shadow: 0 0 5px #ffffff;
	}

	.login-staus-ioc-img {
		position: absolute;
		width: 10px;
		height: 10px;
		background-color: #14ff4f;
		right: 60rpx;
		top: 45%;
		border-radius: 50%;
	}

	.login-staus-span {
		color: #aaff7f;
	}

	.login-staus {
		float: left;
		position: absolute;
		right: 50rpx;
		line-height: 120px;
	}

	.two-spane-name {
		position: relative;
		margin-left: 0%;
		width: 50px;
		text-align: center;
		margin-top: 20rpx;
		outline-width: medium;
		font-size: 10px;
	}

	.img-border-class {
		position: relative;
		background: linear-gradient(#5555ff, #55aaff);
		border-radius: 50%;
		width: 70rpx;
		margin: 0 auto;
		/* 让子元素相对于father居中 */
		height: 70rpx;
	}

	.tow-img-class {
		position: relative;
		width: 70%;
		left: 15%;
		top: 15%;
	}

	.img-div {
		position: relative;
		width: 70%;
		height: 80%;
		/* background-color: #007AFF; */
		left: 25%;
	}

	.two-item-class {
		position: relative;
		width: 18%;
		height: 100%;
		left: 4%;
		float: left;
		/* background-color: #007AFF; */
	}

	.two-div {
		position: relative;
		width: 100%;
		height: 50%;
	}

	.numbers-class {
		position: relative;
		top: 10rpx;
		color: red;
	}

	.itme-div {
		position: relative;
		top: 25%;
		width: 33%;
		margin-left: 0%;
		text-align: center;
		float: left;
	}

	.one-div {
		position: relative;
		width: 100%;
		height: 50%;
	}

	.card-one {
		position: relative;
		width: 94%;
		left: 3%;
		background-color: #FFFFFF;
		height: 300rpx;
		bottom: 20px;
		border-radius: 10px;
		box-shadow: 0 0 5px #FFFFFF
	}

	.logn-ioc {
		position: absolute;
		right: 5%;
		top: 120rpx;
		content: " ";
		display: inline-block;
		height: 10px;
		width: 10px;
		border-width: 0px 0px 2px 2px;
		border-color: #ffffff;
		border-style: solid;
		-webkit-transform: matrix(0, 0, 0.71, 0.71, 0.71, -0.71);
		transform: matrix(-0.71, 0.71, 0.71, 0.71, 0, 0);
	}

	.login-class {
		position: absolute;
		width: 300px;
		line-height: 50px;
		margin-left: 10%;
		font-size: 15.5px;
		color: #ffffff;
	}

	.zili-class {
		position: relative;
		top: 20%;
		float: left;
		left: 7%;
	}

	.toux-img {
		position: relative;
		width: 80px;
		height: 80px;
		border: 2px solid #FFFFFF;
		border-radius: 50%;
	}

	.toubu-bj {
		position: relative;
		width: 100%;
		height: 340rpx;
		background: linear-gradient(#5555ff, #55aaff);
		border-bottom-right-radius: 30px;
		border-bottom-left-radius: 30px;
	}

	.body-my {
		position: relative;
		width: 100%;
	}
</style>
